<template>
  <div class="uploadvideo">
    <Async_header_part :xiao="xiao" title="发布动态" @goback="goback" />
    <input type="file" accept=".mp4" ref="file" @change="change">
    <div class="inputbox" @click="upfile" v-show="!inputFlag"></div>
    <video src="" class="inputbox" v-show="inputFlag" ref="getVideoDom" @click="playHandler" loop autoplay></video>
    <div class="file" v-show="!inputFlag">点击上传或者再下方输入url，推荐使用url</div>
    <div v-show="!inputFlag">
      <input type="text" class="input" placeholder="请输入视频链接(如本地上传可不填)">
      <input type="text" class="input" placeholder="请输入封面链接(如本地上传默认第一张)">
      <input type="text" class="input" placeholder="请输入视频描述">
    </div>
    <div v-show="inputFlag">
      <input type="text" class="input" v-model="videoObj.videoUrl">
      <input type="text" class="input" placeholder="请输入视频描述" v-model="videoObj.videoDesc">
    </div>
    <div class="btn">
      <div class="button">预览</div>
      <div class="button" @click="upload">发布</div>
    </div>
    <!-- <button @click="capture">截图</button> -->
    <!-- <img src="" alt="" ref="img"> -->
  </div>
</template>

<script setup>
import { defineAsyncComponent, ref, reactive } from 'vue'
const Async_header_part = defineAsyncComponent(() => import('../components/common/header-part.vue'))
import { upLoadFileAPI, uploadCoverAPI, publishVideoAPI } from '../api/uploadvideo-page';
const xiao = ref(true)
// 我的id
const myId = JSON.parse(localStorage.getItem('data')).userId
// 视频对象
let videoObj = reactive({
  videoDesc: ''
})
// input框的DOM
const file = ref(null)
// 控制大黑框的显示隐藏
const inputFlag = ref(false)
// video的DOM
const getVideoDom = ref(null)
// img的DOM
// const img = ref(null)
// 返回到home的评论列表
async function goback() {
  document.querySelector('.uploadvideo').style.transform = 'translateX(100%)';
}
// 点击黑框让input框上传
function upfile() {
  file.value.click()
}

// 打开input
async function change(e) {
  console.log(e, '事件对象');
  // 当前视频信息
  let files = e.target.files
  console.log(files, '视频信息');
  // 如果集合的长度为0，即没上传成功则终止执行
  if (!files.length) return
  videoObj.realVideo = files[0]
  // 检查上传的格式(必须是mp4格式的)
  if (!/(mp4)/i.test(videoObj.realVideo.type)) {
    alert('上传的视频只能是mp4类型的')
    return
  }
  // 限制文件上传大小
  if (videoObj.realVideo.size > (20 * 1024 * 1024)) {
    alert('上传的视频不能大于20MB')
    return
  }


  
  checkFileType(videoObj.realVideo)
  console.log(2345);
  // 该方法返回一个blob视频地址
  videoObj.videoUrl = getObjectURL(videoObj.realVideo)
  // 让video标签显示
  inputFlag.value = true
  // 修改video的src地址
  setSrcAndCaptureImage()
}

// 获取blob视频地址
function getObjectURL(file) {
  let url = null
  if (window.createObjectURL !== undefined) {
    url = window.createObjectURL(file)
  } else if (window.URL !== undefined) {
    url = window.URL.createObjectURL(file)
  } else if (window.webkitURL !== undefined) {
    url = window.webkitURL.createObjectURL(file)
  }
  return url
}

// 视频地址(显示隐藏)
function setSrcAndCaptureImage() {
  // 视频地址赋值给video的src属性
  getVideoDom.value.src = videoObj.videoUrl
  // 视频加载第一帧触发截图
  getVideoDom.value.addEventListener('loadeddata', capture)
}

// 点击视频上传
async function upload() {
  // 判断是否上传了视频
  if (!videoObj.realVideo) {
    alert('请先选择要上传的文件')
    return false
  }
  // 把文件传递到服务器
  let formData = new FormData()
  // 后端需要videoPath参数，videoObj.realVideo是视频文件
  // 设置数据(追加)
  formData.append('videoPath', videoObj.realVideo)
  // 请求上传接口
  const result = await upLoadFileAPI(formData)
  // 返回上传后的结果
  console.log(result, '上传后的结果')
  if (result.status === 200) {
    // 视频文件名
    let filename = result.data.filename
    // 视频的id截取（要.前面的作为视频的id）
    const videoId = filename.substr(0, filename.indexOf('.'))
    // base64转buffer
    let blob = dataURItoBlob(videoObj.coverUrl)
    // 上传数据组合
    let coverPic = new FormData()
    coverPic.append('videoId', videoId)
    coverPic.append('videoCover', blob)
    console.log(coverPic);
    // 请求接口
    const resultCover = await uploadCoverAPI(coverPic)
    console.log(resultCover)
    console.log(filename.substr(filename.indexOf('.') + 1)) // mp4（其实就是后缀名）
    if (resultCover.status === 200) {
      const publishResult = await publishVideoAPI(myId, {
        videoId,
        videoCover: `http://43.138.15.137:3000/assets/videoCover/${videoId}.jpg`,
        videoPath: `http://43.138.15.137:3000/assets/videoPath/${videoId}.${filename.substr(filename.indexOf('.') + 1)}`,
        // videoId代表视频名字；
        // videoId后面的.点，就是一个字符串点
        // filename.substr(filename.indexOf('.') + 1)运行结果是后缀名（mp4等等）
        videoDesc: videoObj.videoDesc
      })
      console.log(publishResult)
      if (publishResult.status === 200) {
        // 暂停播放
        getVideoDom.value.pause()
        // 返回home页面
        goback()
      }
    }
  }
}

// 视频播放/暂停
function playHandler() {
  getVideoDom.value.paused ? getVideoDom.value.play() : getVideoDom.value.pause()
}

// 截图
function capture() {
  let scale = 1
  let canvas = document.createElement('canvas')
  // canvas画布大小宽度设置
  canvas.width = getVideoDom.value.videoWidth * scale
  // canvas画布大小宽度设置
  canvas.height = getVideoDom.value.videoHeight * scale
  // 从图像的0,0坐标截取宽度为canvas.width和canvas.height
  canvas.getContext('2d').drawImage(getVideoDom.value, 0, 0, canvas.width, canvas.height)
  // 把截图路径给图片
  // img.value.src = canvas.toDataURL("image/jpg")
  // 把截图路径给videoObj对象中要传的封面使用
  videoObj.coverUrl = canvas.toDataURL('image/png')
  console.log(videoObj)
  // 移除事件（性能优化）
  getVideoDom.value.removeEventListener('loadeddata', capture)
}

// 图片转成Buffer（用来处理二进制的一个接口，后端通过fs模块，读取一张图片获取到图片的文件流）google（上传图片buffer）
function dataURItoBlob(dataURI) {
  let byteString = atob(dataURI.split(',')[1])
  let mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]
  let ab = new ArrayBuffer(byteString.length)
  let ia = new Uint8Array(ab)
  for (let i = 0; i < byteString.length; i++) {
    ia[i] = byteString.charCodeAt(i)
  }
  return new Blob([ab], { type: mimeString })
}

// 文件类型检测
function checkFileType(file) {
  // 创建 FileReader 对象
  let reader = new FileReader();
  // 读取文件
  reader.readAsArrayBuffer(file);
  // 文件读取完成时触发
  reader.onloadend = function () {
    // 获取文件的类型
    let type = getFileType(new Uint8Array(reader.result));
    // 判断文件类型
    if (type !== "mp4") {
      alert("上传的文件类型不是mp4格式!")
    }
  };
}

// 根据文件头判断文件类型
function getFileType(bytes) {
  if (
    bytes[0] === 0x00 &&
    bytes[1] === 0x00 &&
    bytes[2] === 0x00 &&
    bytes[3] === 0x20 &&
    bytes[4] === 0x66
  ) {
    return "mp4";
  } else {
    return "unknown";
  }
}
</script>

<style lang="scss" scoped>
$width: 100%;
$height: 100%;

body,
html {
  height: 100%;
}

.file {
  position: absolute;
  left: 0;
  top: 0;
  color: #fff;
  z-index: 101;
  margin-left: 40px;
  margin-top: 250px;
  font-size: 16px;
}

// img {
//   width: 100%;
// }

.uploadvideo {
  position: absolute;
  top: 0;
  left: 0;
  width: $width;
  height: $height;
  z-index: 100;
  font-size: 14px;
  color: #fff;
  transform: translateX(100%);
  overflow-y: scroll;
  transition: all 1s;
  /* 设置初始透明度 */
  background-color: rgba(22, 22, 34, 1);
  /* 最后一位数字表示透明度，取值范围为0~1，其中0为完全透明，1为不透明 */

  /* 过渡效果，通过动画改变透明度 */
  @keyframes fadeIn {
    0% {
      background-color: rgba(0, 0, 0, 1);
    }

    /* 开始时透明度为0 */
    100% {
      background-color: rgba(22, 22, 34, 1);
    }

    /* 结束时透明度为1 */
  }

  animation: fadeIn 1s ease;
  /* 持续3秒，ease为默认的动画速度曲线 */
}

.inputbox {
  width: 390px;
  height: 422px;
  background: #000;
}

input {
  border: 0;
}

.input {
  width: 350px;
  margin-left: 20px;
  margin-top: 20px;
  margin-bottom: 8px;
  height: 44px;
  background: #161622;
  color: #fff;

  &::placeholder {
    color: #6d6c6c;
  }
}

textarea {
  border: 0;
}

.btn {
  display: flex;
  align-items: center;
  justify-content: space-around;

  .button {
    color: #fff;
  }
}
</style>